<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" href="Index.css"/>
    <link rel="stylesheet" href="bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-theme.css"/>
    <script src="Index.js"></script>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="bootstrap.js"></script>
    <title></title>
</head>
<body>
列组合
<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-a</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
列偏移
<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">.col-md-offset-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-3">.col-md-3</div>
        <div class="col-md-3 col-md-offset-3">.col-md-offset-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">.col-md-offset-3</div>
    </div>
</div>
列嵌套
<div class="container">
    <div class="row">
        <div class="col-md-9">
            level1:.col-md-9
            <div class="row">
                <div class="col-md-6">level2:.col-md-6</div>
                <div class="col-md-6">level2:.col-md-6</div>
            </div>
        </div>
    </div>
</div>
响应式
<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div>
        <div class="col-sm-6 col-md-4">.col-sm-6 .,col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
        <div class="col-sm-6 col-md-4">.col-sm-6 .,col-md-4</div>
        <div class="col-sm-6 col-md-4">.col-sm-6 .,col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-6">.col-sm-6</div>
        <div class="col-sm-6">.col-sm-6</div>
    </div>
</div>
样式叠加
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<div class="alert alert-waring"></div>
<div class="alert alert-danger"></div>
<button type="button" class="btn btn-success btn-lg">Success</button>
<p class="lead"></p>
<p class="text-left"></p>
<p class="text-right"></p>
<p class="text-center"></p>
<p class="text-justify"></p>
<blockquote class="pull-right">
    <p></p>
    <span></span>
</blockquote>
<ul class="list-unstyled">
    <li></li>
    <li></li>
</ul>
<dl class="dl-horizontal">
    <dt></dt>
    <dd></dd>
</dl>
<table class="table"></table>
<table class="table table-striped">
    <tr class="active"></tr>
</table>
<div class="table-responsive">
    <table class="table"></table>
</div>
<form>
    <fieldset>
        <legend>用户登录</legend>
        <div class="form-group">
            <label>登录帐户</label>
            <input type="email" class="form-control" placeholder="Please input your email"/>
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="Please input your password"/>
        </div>
        <div class="form-group">
            <label>再次输入密码</label>
            <input type="password" class="form-control" placeholder="Please input your password again"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>记住密码
            </label>
        </div>
        <button type="submit" class="btn btn-default">登录</button>
    </fieldset>
</form>
<form class="form-inline">
    <div class="form-group">
        <label>用户名</label>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Please input your name"
    </div>
    <div class="form-group">
        <label>密码</label>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" placeholder="Please input your password"
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"/>记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">登录</button>
</form>
<form class="form-horizontal" role="form">
    <div class="form-group">
       <label for="account" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
        <input type="email" class="form-control" id="account" placeholder="name"/>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="password"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"/>记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
<fieldset disabled></fieldset>
<div class="form-group has-warning">
    <label for="inputwarning" class="control-label">输入长度不够</label>
    <input class="form-control" type="text" id="Text1"/>
</div>
<input class="input-lg form-control" type="text" placeholder="较大"/>
<span class="help-block"></span>
<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2"/>
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3"/>
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4"/>
    </div>
</div>
<a class="btn btn-danger" href="#">Link</a>
<input class="submit" class="btn btn-danger" type="button"value="input"/>
<input class="btn btn-danger" type="reset" value="reset"/>
<button type="button" class="btn btn-default">Default</button>
<i class="glyphicon glyphicon-search"></i>
<span class="glyphicon glyphicon-search"></span>
<div class="btn-group">
    <a class="btn btn-default btn-primary" href="#">
        <span class="glyphicon glyphicon-user"></span>
    </a>
    <a class="btn btn-default btn-primary dropdown-toggle" data-toggle="hre">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-munu">
        <li><a href="#"><span class="glyphicon glyphicon-pencil"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-trash"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-circle"></span></a></li>
        <li class="divider"></li>
        <li><a href="#">Make admin</a> </li>
    </ul>
</div>
<div class="control-group">
    <div class="controls">
        <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-envelop"></span>
            </span>
            <input class="col col-lg-2 form-control" id="inputIcon" type="text"/>
        </div>
    </div>
</div>
<ul>
    <li class="active"><a href="#"><span class="glyphcion glyphicon-home"></span>Home</a></li>
    <li><a href="#"><span class="glyphcion glyphicon-pencil"></span>Library</a></li>
    <li><a href="#"><span class="glyphcion glyphicon-book"></span>Application</a></li>
    <li><a href="#"><span class="glyphcion glyphicon-"></span>Misc</a></li>
</ul>
<div class="dropdown open clearfix">
    <ul aria-labeledby="dropdownMenu2" role="presentation" class="dropdown-munu">
        <li class="dropdown-header" role="presentation">Translate the book</li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript精讲</a></li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript开发指面</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">原创图书</li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">深入理解bootstrap</a></li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">right</button>
</div>
<div class="btn-group">
    <a class="btn btn-default">Left</a>
    <a class="btn btn-default">Middle</a>
    <a class="btn btn-default">right</a>
</div>
<div class="toolbar">
    <div class="btn-group"></div>
    <div class="btn-group"></div>
    <div class="btn-group"></div>
</div>
<div class="btn-group">
    <button class="btn btn-default" type="button">首页</button>
    <button class="btn btn-default" type="button">个人简介</button>
    <button class="btn btn-default" type="button">作品</button>
    <div class="btn-group">
        <button data-role="dropdown" class="btn btn-default dropdown-toggle" type="button">图书</button>
        <ul class="dropdown-menu">
            <li><a href="#"></a>编程</li>
            <li><a href="#"></a>编程</li>
            <li><a href="#"></a>编程</li>
        </ul>
    </div>
</div>
<div class="btn-group-vertical">
    <button class="btn btn-default" type="button">首页</button>
    <button class="btn btn-default" type="button">个人简介</button>
    <button class="btn btn-default" type="button">作品</button>
</div>
<div class="btn-group btn-group-justified">
    <a role="button" class="btn btn-default">left</a>
    <a role="button" class="btn btn-default">middle</a>
    <a role="button" class="btn btn-default">rigth</a>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        success<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li class="divider"></li>
        <li><a href="#">Action</a> </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-dange">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li class="divider"></li>
        <li><a href="#">Action</a> </li>
    </ul>
</div>
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control"/>
    <span class="input-group-addon">&</span>
</div>
<ul class="nav nav-tabs"></ul>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a> </li>
    <li><a href="#">Profile</a> </li>
    <li><a href="#">Message</a> </li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span> </a>
        <ul class="dropdown-menu"><a href="#" tabindex="-1">二级菜单1</a> </ul>
        <ul class="dropdown-menu"><a href="#" tabindex="-1">二级菜单1</a> </ul>
        <ul class="dropdown-menu"><a href="#" tabindex="-1">二级菜单1</a> </ul>
    </li>
</ul>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">active</a> </li>
        <li><a href="#">link</a> </li>
        <li class="disabled"><a href="#">ldisabled</a> </li>
        <li><a href="#">link</a> </li>
    </ul>
</nav>
<form class="navbar-form navbar-left" role="search"></form>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"><a href="#" class="navbar-brand">brand</a> </div>
    <div class="nav navbar-nav">
        <label class="navbar-text">文本</label>
        <label class="navbar-text">文本</label>
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"><a href="#" class="navbar-brand">brand</a> </div>
    <div class="nav navbar-nav">
        <label class="navbar-link">link</label>
        <label class="navbar-link">link</label>
    </div>
</nav>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
    <button class="btn btn-success navbar-btn" type="button">button</button>
</nav>
<div class="navbar navbar-default navbar-fixed-top"></div>
<div class="collapse navbar-collapse navbar-responsive-collapse"></div>
<ul class="breadcrumb">
    <li><a href="#">home</a> </li>
    <li><a href="#">home</a> </li>
    <li><a href="#">home</a> </li>
</ul>
<ul class="pagination">
    <li><a href="#">&laquo;</a> </li>
    <li><a href="#">1</a> </li>
    <li><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">&raquo;</a> </li>
</ul>
<ul class="pager">
    <li><a href="#">上一页</a> </li>
    <li><a href="#">下一页</a> </li>
</ul>
<h1>开发框架<span class="label">new</span></h1>
<a href="#">Inbox<span class="badge">36</span></a>
<div class="jumbotron">
    <h1>hello world</h1>
    <p>Welcome to my website</p>
    <p><a class="btn btn-primary btn-lg"</p>
</div>
<div class="page-header">
    <h1>Example header<small>Subtext for header</small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img data-src="#" alt=""/>
        </a>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success"></div>
    <div class="progress-bar progress-bar-warning"></div>
    <div class="progress-bar progress-bar-danger"></div>
</div>
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="Image/Flint02.jpg"/>
    </a>
    <div class="media-body">
        <h4 class="media-heading">media heading</h4>
        ....
        <div class="media"></div>
    </div>
</div>
<ul class="media-list">
    <li class="media"></li>
    <li class="media"></li>
    <li class="media"></li>
</ul>
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">14</span>
            编程精讲
    </li>
    <li class="list-group-item">编程精讲</li>
    <li class="list-group-item">编程精讲</li>
    <li class="list-group-item">编程精讲</li>
</ul>
<div class="list-group">
    <a href="#" class="list-group-item active">编程精讲
    <span class="badge">2</span>
    </a>
    <a href="#" class="list-group-item active">设计模式
        <span class="badge">3</span>
    </a>
    <a href="#" class="list-group-item active">启示录
        <span class="badge">1</span>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h3 class="list-group-item-heading">编程精讲</h3>
        <p class="list-group-item-text">....</p>
    </a>
    <a href="#" class="list-group-item active">
        <h3 class="list-group-item-heading">编程精讲</h3>
        <p class="list-group-item-text">....</p>
    </a>
</div>
<div class="panel panel-default">
    <div class="panel-heading">header</div>
    <div class="panel-body">
      <p>面板内容</p>
    </div>
    <table class="table table-bordered">
        ...
    </table>
    <div class="panel-footer">footer</div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">header</div>
    <div class="panel-body">
        <p>面板内容</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">14</span>
            编程精讲
        </li>
        <li class="list-group-item">编程精讲</li>
        <li class="list-group-item">编程精讲</li>
        <li class="list-group-item">编程精讲</li>
    </ul>
    <div class="panel-footer">footer</div>
</div>
<div class="well">
    <p>some default panel</p>
    <blockquote>这是引用内容</blockquote>
</div>
</body>
</html>